<template>
	<view>
		<view class="header-box">
			<image :src="photoUrl" mode="" @click="changeImage"></image>
			<view class="text">
				{{teacher.name}} 老师
			</view>
		</view>
		<view class="informationList">
			<uni-list :border="false">
				<uni-list-item :border="false" title="账号" note="1836717519" />
			</uni-list>
			<uni-list :border="false">
				<picker @change="bindPickerChange" :value="index" :range="array">
					<uni-list-item :border="false" showArrow title="性别" :note="array[index]" />
				</picker>
			</uni-list>
			<uni-list :border="false">
				<uni-list-item clickable @click="editBirthday" :border="false" showArrow title="生日" :note="birthday" />
			</uni-list>
			<uni-list :border="false">
				<uni-list-item :border="false" showArrow title="所在地" note="安徽-芜湖" />
			</uni-list>
			<uni-list :border="false">
				<uni-list-item :border="false" showArrow title="电话" note="13167636008" />
			</uni-list>
			<uni-list :border="false">
				<uni-list-item :border="false" showArrow title="邮箱" note="2772821904@qq.com" />
			</uni-list>
		</view>
		<view class="editPwd">
			<uni-list :border="false">
				<uni-list-item :border="false" showArrow title="修改密码" link="navigateTo" to="../editPwd/editPwd" />
			</uni-list>
		</view>

		<uni-calendar ref="calendar" :insert="false" @confirm="confirm" />
		<uni-popup ref="popup" type="bottom">
			<view class="dibu">
				<view @click="choose">更换图片</view>
				<view @click="seeIcon">查看图片</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				birthday: '2001-06-21',
				array: ['男', '女'],
				index: 0,
				imagePath: [],
				token: '',
				teacher: {},
				photoUrl: ''
			}
		},
		//页面初次加载 加载数据
		onLoad(option) {
			this.request();
		},
		methods: {
			editBirthday() {
				this.$refs.calendar.open();
			},
			//修改生日 点击确定后操作
			confirm(e) {
				this.birthday = e.fulldate;
			},
			//性别选择 修改
			bindPickerChange(e) {
				let value = e.detail.value;
				value === 0 ? 0 : 1;
				this.index = value;

			},
			//点击图片跳出
			changeImage() {
				this.$refs.popup.open();
			},
			//选择图片 将图片上传到服务器
			choose() {
				let that = this;
				this.$refs.popup.close();
				uni.chooseImage({
					count: 1,
					success: res => {
						this.imagePath = res.tempFilePaths;
						uni.uploadFile({
							fileType: "image",
							url: 'http://101.43.227.220:3003/teacher/uploadPhoto',
							filePath: this.imagePath[0],
							name: 'file',
							header: {
								// 'Content-Type': "multipart/form-data",
								'token': 'i8jeGBrEVKCvIya4S45LjpaVSBU2eW5SE06YQepjI'
							},
							success: res => {
								let data = JSON.parse(res.data);
								let imageUrl = data.data.filepath;
								uni.setStorage({
									key: 'photoUrl',
									data: imageUrl
								});
								that.request();
							},
							fail: e => {
								console.log(e);
							}
						})
					}
				})
			},
			request() {
				uni.getStorage({
					key: 'teacher',
					success: res => {
						this.teacher = res.data
					}
				});
				uni.getStorage({
					key: 'photoUrl',
					success: res => {
						this.photoUrl = res.data
					}
				});
				uni.getStorage({
					key: 'token',
					success: res => {
						this.token = res.data
					}
				})
			},
			//预览图片
			seeIcon() {
				uni.previewImage({
					urls: this.imagePath,
					//长按操作
					longPressActions: {
						success: function(data) {
							console.log(data);
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				});
			}
		}
	}
</script>

<style scoped>
	page {
		background-color: #F5F5F5;
	}

	.header-box {
		display: flex;
		width: 90%;
		margin: 0 auto;
		margin-top: 20px;
		/* box-shadow: rgb(179 169 169 / 26%) 0px 0px 3px 1px; */
		border-radius: 5px;
		padding: 8px;
		box-sizing: border-box;
	}

	.header-box image {
		height: 150rpx;
		width: 150rpx;
		border-radius: 10rpx;
	}

	.text {
		flex: 2;
		text-align: center;
		line-height: 140rpx;
		font-size: 44rpx;
		font-weight: 600;
	}

	.informationList {
		width: 90%;
		background-color: white;
		margin: 20px auto;
		border-radius: 10px;
		/* box-shadow: rgb(179 169 169 / 26%) 0px 0px 3px 1px; */
	}

	.editPwd {
		width: 90%;
		margin: 0 auto;
	}

	>>>.uni-list-item__content-title {
		font-size: 17px;
	}

	>>>.uni-list-item__content-note {
		font-size: 15px;
	}

	.dibu {
		background-color: white;
	}

	.dibu>view {
		text-align: center;
		padding: 16px 0px;
		font-size: 16px;
		font-weight: 600;
		border: 1px solid lightgray;
	}
</style>
